{% extends "base.html" %}
{% load static %}

{% block content %}
    <div class="row">
        <div class="col-lg">
            <div class="card">
                <div class="card-body">
 <div class="row mb-2">
     <div class="col">
     {{ khxq.username }}
     </div>
 </div>
                    <div class="row">
                        <div class="col-3">
                            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
                                 aria-orientation="vertical">
                                <a class="nav-link active show" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home"
                                   role="tab" aria-controls="v-pills-home" aria-selected="true">个人信息</a>
                                <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile"
                                   role="tab" aria-controls="v-pills-profile" aria-selected="false">客户订单</a>
                                <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill"
                                   href="#v-pills-messages" role="tab" aria-controls="v-pills-messages"
                                   aria-selected="false">进班情况</a>
                                <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill"
                                   href="#v-pills-settings" role="tab" aria-controls="v-pills-settings"
                                   aria-selected="false">跟进记录</a>
                                <a class="nav-link" id="v-pills-xiangqing-tab" data-toggle="pill"
                                   href="#v-pills-xiangqing" role="tab" aria-controls="v-pills-xiangqing"
                                   aria-selected="false">客户资料</a>


                            </div>
                        </div>
                        <div class="col-9">
                            <div class="tab-content" id="v-pills-tabContent">
                                <div class="tab-pane fade active show" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">{#客户基本信息展示  #}
                                    <div class="container">
                                        <div class="row">
                                            <table class="table ">
                                                <tr>
                                                    <td>姓名</td>
                                                    <td>{{ khxq.username }}</td>
                                                    <td>联系人</td>
                                                    <td>{{ khxq.name }}</td>
                                                    <td>联系电话</td>
                                                    <td>{{ khxq.tel }}</td>
                                                    <td>咨询时间</td>
                                                    <td>{{ khxq.zixuntime }}</td>
                                                </tr>
                                                <tr>
                                                    <td>录入时间</td>
                                                    <td>{{ khxq.addtime }}</td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                                <tr>
                                                    <td>备注</td>
                                                    <td>{{ khxq.beizhu }}</td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="row">
                                            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
                                                 aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleModalCenterTitle">
                                                                修改客户基本信息</h5>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <!-- 客户基本信息表单 -->
                                                          <form method="post" >
                                                                {% csrf_token %}
                                                                {{ kehu_form.as_p }}
                                                                <button type="submit">更新客户信息</button>
                                                            </form>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                    data-dismiss="modal">Close
                                                            </button>
                                                            <button type="button" class="btn btn-primary">Save changes
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                              <button type="button" class="btn btn-primary" data-toggle="modal"
                                                    data-target="#exampleModalCenter">
                                               更新客户资料
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="v-pills-profile">{#客户订单信息#}
                                <div class="row mb-2">
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">新增订单</button>
                                </div>
                                <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                                          <div class="modal-dialog">
                                            <div class="modal-content">
                                              <div class="modal-header">
                                                <h5 class="modal-title" id="staticBackdropLabel">{{ khxq.username }}/{{ khxq.name }} | 新增订单</h5>
                                              </div>
                                            <form method="post">
                                            {% csrf_token %}
                                              <div class="modal-body">
                                                    {% for kehudingdan in KeHuDingdan_Form %}
                                                    <div class="form-group">
                                                     <label for="recipient-name" class="col-form-label">{{ kehudingdan.label_tag }}</label>
                                                        {{ kehudingdan }}
                                                    </div>


                                                    {% endfor %}
{% for error in kehudingdan.errors %}
                                                          <p class="text-danger">{{ error }}</p>
                                                            {% endfor %}
                                              </div>

                                              <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                                <button class="btn btn-primary" type="submit">保存</button>
                                              </div>
                                            </form>

                                            </div>
                                          </div>
                                        </div>

<div class="row">
                                    <table class="table table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <td>序号</td>
                                            <td>订单号</td>
                                            <td>客户姓名</td>
                                            <td>订单时间</td>
                                            <td>订单归属</td>
                                            <td>操作</td>
                                        </tr>
                                        </thead>
                                        {% for dingdan in related_dingdans %}
                                            <tr>
                                                <td>{{ dingdan.id }}</td>
                                                <td>{{ dingdan.ddh }}</td>
                                                <td>{{ khxq.username }}</td>
                                                <td>{{ dingdan.ddtime }}</td>
                                                <td>{{ dingdan.dduser }}</td>
                                                <td>
                                                    <button type="button" class="btn btn-primary" data-toggle="modal"
                                                            data-target="#exampleModalCenter_{{ dingdan.id }}">查看详情
                                                    </button>
                                                    <button type="button" class="btn btn-primary">Primary</button>
                                                </td>

                                            </tr>
                                            {# 操作按钮模态框#}
                                            <div class="modal fade" id="exampleModalCenter_{{ dingdan.id }}"
                                                 tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
                                                 aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title"
                                                                id="exampleModalCenterTitle">{{ khxq.username }}
                                                                - {{ dingdan.ddh }}</h5>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body">
                                                            ...
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-primary"
                                                                    data-dismiss="modal">关闭
                                                            </button>
                                                            {#        <button type="button" class="btn btn-primary">Save changes</button>#}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </table>
</div>

                                </div>
                                <div class="tab-pane fade" id="v-pills-messages" role="tabpanel"
                                     aria-labelledby="v-pills-messages-tab">{#客户进班信息#}
                                    
                                </div>
                                <div class="tab-pane fade" id="v-pills-settings" role="tabpanel"
                                     aria-labelledby="v-pills-settings-tab">

                                    <div class="card p-2">
                                       <h2 class="mb-2 p-3">跟进记录</h2>
                                        <ul class="list-group "  style="max-height: 500px; overflow-y: auto;">
                                        {% for genjinlog in genjinlogs %}
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                        {% if genjinlog.get_genjinleixing_display == '提醒' %}
                                            <span><i class="icon-clock text-danger"></i>
                                                {{ genjinlog.get_genjinleixing_display }}:</span>
                                           <p> {{ genjinlog.genjintext }}</p>

                                             {% elif genjinlog.get_genjinleixing_display == '重要' %}

                                            <span><i class="icon-paper-airplane text-danger"></i>
                                               {{ genjinlog.get_genjinleixing_display }}:</span>
                                            <p>{{ genjinlog.genjintext }}</p>
                                        {% else %}
                                            <span><i class="icon-list text-primary icon-paper-airplane"></i>{{ genjinlog.get_genjinleixing_display }}:</span>{{ genjinlog.genjintext }}
                                        {% endif %}

                                            <span class="float-right" ><span class="badge badge-primary badge-pill mr-5">{{ genjinlog.genjintime }}</span>
                                            <a class="badge badge-primary badge-pill" href="{% url 'genjinlogs_delete' pk=genjinlog.id %}">删除</a>
                                            </span>
                                        </li>
                                        {% endfor %}
                                        </ul>
                                    </div>
                                 <div class="card p-2">
                                        <h3>添加跟进记录</h3>
                                            <form method="post">
             {% csrf_token %}
            {{ genjinlog_form.as_p }}
            <button type="submit">保存</button>
        </form>
                                      </div>

                                </div>
                                <div class="tab-pane fade" id="v-pills-xiangqing" role="tabpanel"
                                     aria-labelledby="v-pills-xiangqing-tab">
                                    <div class="card">
                                        <div class="card-header">客户资料上传</div>
                                        <div class="card-body">
                                             <!-- 客户资料表单 -->
                                            <form method="post" action="{% url 'kehu_zilao_create_or_update' khxq.pk %}" class="form form-group">
                                        {% csrf_token %}
                                        {{ zilao_form.as_p }}
                                        <button type="submit">保存客户资料</button>
                                    </form>
                                        </div>



                                        </div>

                                </div>


                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
{% endblock %}
{% block footerjs %}
<script>
document.addEventListener("DOMContentLoaded", function() {
  // 获取 URL 中的锚点部分
  var hash = window.location.hash;
  // 检查是否指定了有效的标签页 ID（去掉前面的 # 号）
  if (hash && hash.startsWith("#")) {
    var tabToShow = hash.substring(1); // 去掉 # 号
    $('a[href="#' + tabToShow + '"]').tab('show');
  }

});
</script>
{% endblock %}